﻿@{
    Lang lang = ViewBag.Lang;
}
<style>
    .domestic-col
    {
        float: left;
    }
    .domestic-col li a:hover
    {
        background-color:Gray;
        color:white;
    }
    .domestic-col li a
    {
        padding:1px;
        margin:1px;
    }
    .domestic-col .title
    {
        font-weight: bold;
        color: Red;
    }
</style>
@{ Html.Telerik().Window()
        .Name("Window")
        .Title(@lang.CHOOSECITY)
        .Draggable((bool)ViewData["movable"])
        .Resizable(resizing => resizing
            .Enabled((bool)ViewData["resizable"])
            .MinHeight(350)
            .MinWidth(250)
            .MaxHeight(500)
            .MaxWidth(500)
        )
        .Modal((bool)ViewData["modal"])
        .Buttons(b => b.Maximize().Close())
        .Content(
    @<text>
    @lang.SEARCH
    @(Html.Telerik().AutoComplete()
                            .BindTo(ViewData["LSTCITYFROM"] as List<string>)
            .Name("myAutoComplete")
            .HighlightFirstMatch(true)
            .AutoFill(true)
            .HtmlAttributes(new { @class = "tbox readonly input", @style = "width:250px" })
            .Filterable(filtering =>
            {
                filtering.FilterMode(AutoCompleteFilterMode.Contains);
            })
        )
    <input type="hidden" id="tagBind" />
    <input type="button" id="btnChoose" value="@lang.CHOOSE" style="height:33px"/>
    <div id="list-arrival" class="dialog listCity ui-dialog-content ui-widget-content"
        scrolltop="0" scrollleft="0" style="display: block; width: auto; min-height: 93.03125px;
        height: auto;">
        <div class="domestic-col">
            <ul>
                <li class="title">Miền Bắc </li>
                <li><a airportcode="HAN" href="javascript:(void)"><b>Hà Nội </b><span>(HAN)</span> </a>
                </li>
                <li><a airportcode="HPH" href="javascript:(void)"><b>Hải Phòng</b> <span>(HPH)</span>
                </a></li>
                <li><a airportcode="DIN" href="javascript:(void)"><b>Điện Biên</b> <span>(DIN)</span>
                </a></li>
            </ul>
            <ul>
                <li class="title">Miền Trung </li>
                <li><a airportcode="THD" href="javascript:(void)"><b>Thanh Hóa</b> <span>(THD)</span>
                </a></li>
                <li><a airportcode="VII" href="javascript:(void)"><b>Vinh</b> <span>(VII)</span> </a>
                </li>
                <li><a airportcode="HUI" href="javascript:(void)"><b>Huế</b> <span>(HUI)</span> </a>
                </li>
                <li><a airportcode="VDH" href="javascript:(void)"><b>Đồng Hới</b> <span>(VDH)</span>
                </a></li>
                <li><a airportcode="DAD" href="javascript:(void)"><b>Đà Nẵng</b> <span>(DAD)</span>
                </a></li>
                <li><a airportcode="PXU" href="javascript:(void)"><b>Pleiku</b> <span>(PXU)</span> </a>
                </li>
                <li><a airportcode="TBB" href="javascript:(void)"><b>Tuy Hòa</b> <span>(TBB)</span>
                </a></li>
            </ul>
        </div>
        <div class="domestic-col">
            <ul>
                <li class="title">Miền Nam </li>
                <li><a airportcode="SGN" href="javascript:(void)"><b>Hồ Chí Minh </b><span>(SGN)</span>
                </a></li>
                <li><a airportcode="CXR" href="javascript:(void)"><b>Nha Trang</b> <span>(CXR)</span>
                </a></li>
                <li><a airportcode="DLI" href="javascript:(void)"><b>Đà Lạt</b> <span>(DLI)</span> </a>
                </li>
                <li><a airportcode="PQC" href="javascript:(void)"><b>Phú Quốc</b> <span>(PQC)</span>
                </a></li>
                <li><a airportcode="TMK" href="javascript:(void)"><b>Tam Kỳ</b> <span>(VCL)</span> </a>
                </li>
                <li><a airportcode="UIH" href="javascript:(void)"><b>Qui Nhơn</b> <span>(UIH)</span>
                </a></li>
                <li><a airportcode="VCA" href="javascript:(void)"><b>Cần Thơ</b> <span>(VCA)</span>
                </a></li>
                <li><a airportcode="VCS" href="javascript:(void)"><b>Côn Đảo</b> <span>(VCS)</span>
                </a></li>
                <li><a airportcode="BMV" href="javascript:(void)"><b>Ban Mê Thuột</b> <span>(BMV)</span>
                </a></li>
                <li><a airportcode="VKG" href="javascript:(void)"><b>Rạch Giá</b> <span>(VKG)</span>
                </a></li>
                <li><a airportcode="CAH" href="javascript:(void)"><b>Cà Mau</b> <span>(CAH)</span> </a>
                </li>
            </ul>
        </div>
    </div>
    </text>
)
        .Width(500)
        .Height(300)
        .Render();
}
<script>
    function SetCity(tag, str) {
        $('#' + tag).val(str);
        $('#myAutoComplete').val("");
        if (tag == 'fromcity') {
            
            if (onCheckPlace() == false) {
                $('#' + tag).val("");
                alert("@lang.DEPARTDIFFRETURN");
                $('#fromcity').click();

            }
            else {
                $('#tocity').click();
            }
        }
        if (tag == 'tocity') {
            var datePicker = $("#DatePickerDepartDate").data("tDatePicker");
            if (onCheckPlace() == false) {
                $('#' + tag).val("");
                alert("@lang.DEPARTDIFFRETURN");
                $('#tocity').click();
            }
            else {
                datePicker.open();
            }
        }
    }

    function onCheckPlace() {
        fromcity = $("#fromcity").val();
        tocity = $("#tocity").val();
        if (fromcity == tocity) {
            return false;
        }
        return true;
    }

    var windowElement = $('#Window');
    $('#Window').hide();
    var undoButton = $('#fromcity');
    undoButton.bind('click', function (e) {
        $('#Window').show();
        $('#myAutoComplete').focus();
        var p = $('#fromcity');
        var offset = p.offset();
        $("#tagBind").val("fromcity");
        $('#Window').css('top', offset.top + 35);
        $('#Window').css('left', offset.left);
        $('#fromcity').val('')
        //windowElement.data('tWindow').open();
    });
    var undoButton = $('#tocity');
    undoButton.bind('click', function (e) {
        $('#Window').show();
        $('#myAutoComplete').focus(); var p = $('#tocity'); var offset = p.offset(); $("#tagBind").val("tocity"); $('#tocity').val('')
        $('#Window').css('top', offset.top + 35); $('#Window').css('left', offset.left);
    });
    $('.domestic-col a').click(function (e) {
        $('#Window').hide();
        SetCity($('#tagBind').val(), e.currentTarget.textContent);
    });
    $('#myAutoComplete').bind('keypress', function (e) {
        if (e.keyCode == 13) {
            $('#Window').hide();
            SetCity($('#tagBind').val(), $('#myAutoComplete').val());
        }
    });
    $('#btnChoose').click(function (e) {
        $('#Window').hide();
        SetCity($('#tagBind').val(), $('#myAutoComplete').val());
    });
</script>
